<template>
  <div class="img_page bg_f">
    <div class="file_bnt" v-if="realList.length>0">
      <!-- <ImgItem v-if="ig" v-for="(ig,index) in imgList" :key="index"></ImgItem> -->
      <div class="img_item" v-for="(ig,index) in realList" :key="index">
        <div class="img_box">
          <img :src="ig||errImg" @error="errImgFun(index)">
        </div>
        <div class="icon_box" @tap="delImg(index)">
          <icon type="clear" size="20" color="rgba(0,0,0,0.3)"/>
        </div>
      </div>
    </div>
    <div style="padding:0 15px">
      <!-- <button @click="openActionsheet" type="primary" class="add_img">添加图片</button> -->
    </div>
  </div>
</template>

<script>
import api from "@/utils/api";
import ImgItem from "./ImgItem";
export default {
  props: {
    clear: Boolean,
    showActive:Boolean
  },
  components: {
    ImgItem
  },
  data() {
    return {
      postData: {
        data: "", //base64,
        type: "png",
        reason: "" //异常 异常原因
      },
      statusImg: "",
      imgList: [],
      postList: [],
      errImg: require("../../static/images/load_err.png"),
      imgUrl: ""
    };
  },
  methods: {
    delImg(n) {
      this.postList.splice(n, 1);
      this.imgList.splice(n, 1);
    },
    errImgFun(n) {
      this.imgList[n] = this.errImg;
    },
    openActionsheet() {
        let _this = this;
      if (_this.imgList.length <6) {
        wx.showActionSheet({
          itemList: ["从相册中选择", "拍照"],
          itemColor: "#f7982a",
          success: function(res) {
            if (!res.cancel) {
              if (res.tapIndex == 0) {
                _this.chooseWxImage("album");
              } else if (res.tapIndex == 1) {
                _this.chooseWxImage("camera");
              }
            }
          }
        });
      }else{
        _this.toastError('最多上传6张图')
      }
    },
    chooseWxImage: function(type) {
      let _this = this;
      wx.chooseImage({
        // sizeType: ["original", "compressed"],
        sizeType: ["compressed"],
        sourceType: [type],
        success: function(res) {
          console.log("res", res);
          let basStr = wx
            .getFileSystemManager()
            .readFileSync(res.tempFilePaths[0], "base64");
          _this.postData.data = basStr;
          _this.statusImg = res.tempFilePaths[0];
          _this.imgList.push(_this.statusImg);
          let tm = res.tempFilePaths[0];
          let strNum = tm.lastIndexOf(".");
          let typeStr = tm.substring(strNum + 1, tm.length);
          _this.postData.type = typeStr;
          _this.uploadFile();
        },
        fail: function() {
          // fail
          _this.toastError("图片获取失败");
        }
      });
    },
    uploadFile() {
      let option = this.postData;
      console.log("this.fprm", this.option);
      api
        .uploadFile(option)
        .then(res => {
          console.log("上传", res.url);
          if (res && res.code == 0) {
            this.postList.push(res.url);
            this.$emit("subImg", this.postList);
            this.toastSuccess("上传成功");
          } else {
            this.toastError("上传失败");
          }
        })
        .catch(err => {
          console.log("err", err);
          this.toastError("上传失败");
        });
    },
    clearList() {
      this.imgList = [];
      this.postList = [];
    }
  },
  computed: {
    realList() {
      let lm = this.imgList;
      return lm;
    }
  },
  watch: {
    imgList() {
      this.$emit("subImg", this.postList);
    },
    clear() {
      this.clearList();
    },
    showActive(){
      this.openActionsheet()

    }
  }
};
</script>

<style scoped>
.img_page {
  margin-top: 15px;
  background-color: #fff;
}
.img_item {
  position: relative;
  margin-bottom: 30px;
}
.icon_box {
  position: absolute;
  right: -10px;
  top: -20px;
  padding: 10px;
}
.file_bnt {
  padding: 15px;
}
.img_box {
  width: 100%;
  max-height: 300px;
  overflow: hidden;
}
.add_img {
  /* position: fixed; */
  margin: 20px 0;
  height: 45px;
  line-height: 45px;
  width: 100%;
  font-size: 16px;
}
</style>
